<template>
	<div class="high-school">
		<!-- 头部导航 -->
		<div class="high-school-top-nav">
			<router-link class="item" :to="topNav.link" v-for="(topNav , index) in topNavs " :key="index">
				<div class="icon">
					<img :src="topNav.icon" alt="">
				</div>
				<span>{{topNav.label}}</span>
			</router-link>
		</div>
		<!-- 推荐导航 -->
		<!-- <div class="high-school-remm">
			<div class="title">
				<h2>
					<img :src="require('../assets/images/hremm1.png')" alt="">
					为你推荐
				</h2>
			  <div class="reload">
					换一批
					<img :src="require('../assets/images/reload.png')" alt="">
				</div>
			</div>
			<nav>
				<a class="item" v-for="(remmnav , index) in remmNavs " :key="index">
					<div class="icon">
						<img :src="remmnav.img" alt="">
					</div>
					<span>{{remmnav.name}}</span>
				</a>
			</nav>
		</div> -->
		<div class="recommend-wrap">
            <div class="recommendation">
                <div class="recommendation-left">
                    <span>为你推荐</span>
                </div>
                <div class="recommendation-right" @click="changeFour">
                    <span>换一批</span>
                </div>
            </div>
            <grid :cols="4" class="recommendation-girds" :show-lr-borders="false">
                <div v-for="(item,index) in fourList" @click.stop="handleFourTap(item,index)">
                    <grid-item  :label="item.name" > 
                        <img slot="icon" :src="item.img" alt="" srcset=""> 
                    </grid-item>
                </div>
                <!-- <grid-item label="二手电脑"> <img slot="icon" src="../assets/images/mac.jpg" alt="" srcset=""></grid-item>-->
            </grid>
        </div>
		<!-- 主体部分 -->
		<div class="high-school-content">
			<h2>热销商品</h2>
			<!-- <scroller lock-x :height="scrollHeight" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200"> -->
		  		<ul class="shop-list">
		  			<!-- <div > -->
		  			<li class="shop-item" v-for="(shopItem,index) in goodsList" :key="index" @click="goDetail(shopItem.id)">
			          <div class="picture">
			            <img :src="shopItem.logo" alt="">
			          </div>  
			          <div class="name">{{shopItem.name}}</div>
			          <div class="info">
			            <div class="shop-item-price">￥{{shopItem.discountPrice | formatPrice}}</div>
			            <div class="type" v-if="shopItem.type">
			              {{shopItem.type}}
			            </div>
			          </div>
			          <div class="address" v-if="shopItem.shopName">
			            {{shopItem.shopName}}
			          </div>
		  			</li>
		  			<!-- </div> -->
		        	<load-more :tip="loadingText" :show-loading="onFetching"></load-more>
		  		</ul>
    		<!-- </scroller> -->
		</div>
		<foot-nav/>
	</div>
</template>
<script>
import axios from '@/api/request'
// import ShopItem from '../components/shopItem';
import footNav from "@/components/footer-nav.vue"
import {Selector,LoadMore,Scroller,Grid,GridItem } from "vux";
import { mapState, mapGetters } from "vuex";
export default {
	components:{
		// ShopItem,
		footNav,LoadMore,Scroller,Grid,GridItem
	},
	data(){
		return {
			topNavs:[
				{ label:'纪念书籍' , icon: require('../assets/images/hst1.png'), link: '/' },
				{ label:'纪念徽章' , icon: require('../assets/images/hst2.png'), link: '/' },
				{ label:'热门物品' , icon: require('../assets/images/hst3.png'), link: '/' },
				{ label:'离校留念' , icon: require('../assets/images/hst4.png'), link: '/' },
				{ label:'纪念徽章' , icon: require('../assets/images/hst5.png'), link: '/' },
			],
			remmNavs:[
				{ label: '笔记本' , link: '/', icon:require('../assets/images/mac.png') },
				{ label: '电动车' , link: '/', icon:require('../assets/images/moto.png') },
				{ label: '电脑配件' , link: '/', icon:require('../assets/images/host.png') },
				{ label: '苹果' , link: '/', icon:require('../assets/images/iphoneX.png') }
			],
			fourList: [],
			goodsList: [],
			listQuery:{
		        pageSize: 10,
		        pageNumber: 1,
		        param:{
					// firstKindId: '',
					schoolId: '',
					solds: 1,        //2由低到高，1是由高到低
					// sequence: '',    //1由低到高，2是由高到低
					// startTime: '',   //上新取最新一周，  时间段开始时间
					// endTime: '',     //时间段结束时间			
		        }
		    },
		    fourQuery:{
		        pageSize: 4,
		        pageNumber: 1,
		        param:{	}
		    },
		    scrollHeight: null,
		    onFetching: false,
	      	loading: false,
	      	loadingText: '',
	      	_schoolId: '',
	      	_userId: '',
	      	firstKindTotal: '',
		}
	},
	filters:{
      formatPrice(val){
        // return val.toFixed(2)
        return val
      },
    },
    computed:{
        ...mapGetters({
          openId: 'doneOpenId',
          userId: 'doneUserId',
          phone: 'donePhone',
          schoolId: 'doneSchoolId',
        }),
    },
	created(){ 
		this._schoolId = this.$route.query.schoolId
		if(!this._schoolId){
			this._schoolId = this.schoolId
		}
		this._userId = this.$route.query.userId
		if(!this._userId){
			this._userId = this.userId
		}
		this.listQuery.param.schoolId = this._schoolId
		this.fetchHighschoolList();
		this.fetchRecommendList();
	},
	mounted() {

	},
	methods: {
		// 获取热销产品列表
		fetchHighschoolList() {
			var self = this;           //fourTable
			axios('/device/product/list','post',this.listQuery).then(res=>{
				if(res.data.code==1000){
					// console.log(res)
					self.goodsList = res.data.data.list;
				}
			})		
		},			
		// 获取为你推荐列表
		fetchRecommendList() {
			var self = this;
			// axios('/device/kindSecond/listRecommend','post',{pageNumber: 1,pageSize: 4}).then(res=>{
			// 	if(res.data.code==1000){
			// 		console.log(res)
			// 		self.fourList = res.data.data.list;
			// 		self.firstKindTotal = res.data.data.total
			// 	}
			// })
			axios('/device/kind/menuFirstFour','post',this.fourQuery).then(res=>{
                if(res.data.code==1000){
                    console.log(res)
                    self.fourList = res.data.data.list;
					self.firstKindTotal = res.data.data.total
                }
            })	
		},
		onScrollBottom(){
			let self = this
			if(this.onFetching) {
			  // do nothing
			}else {
				this.onFetching = true
				this.loadingText = "loading"
				this.listQuery.pageNumber+=1
				this.fetchData()
			}
	    },
	    changeFour(){
            if(this.fourQuery.pageNumber*4<this.firstKindTotal){
                this.fourQuery.pageNumber+=1
            }else{
                this.fourQuery.pageNumber=1
            }
            this.fetchRecommendList()
        },
        handleFourTap(item,idx) {
            this.$router.push({path:'/goodsList',query:{firstKindId: item.id}})
        },
	    goDetail(id) {
	    	console.log(123)
	    	this.$router.push({path: '/goodsDetail',query: {goodsId: id,userId: this._userId}})
	    },		
	},
	
};
</script>
<style lang="less" scoped>
@import "../assets/less/highSchool.less";
</style>
<style lang="less" scoped>
.high-school{
	.shop-list{
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    padding: .266667rem /* 20/75 */;
	    li{
	      	width: 4.613333rem /* 346/75 */;
	      	margin-bottom: .533333rem /* 40/75 */;
	    }
	    .shop-item{
	      	// width: 100%;
	      	background: #fff;
	      	.picture{
	        	height: 346rem/75;
	        	width: 100%;
	        	img{
	            	width: 100%;
	            	height: 346rem/75;
	        	}
	      	}
	      	.name{
		        overflow: hidden;
		        white-space: nowrap;
		        text-overflow: ellipsis;
		        color: #000000;
		        font-size: .4rem /* 30/75 */;
		        margin-top: .533333rem /* 40/75 */;
	      	}
	      	.info{
		        display: flex;
		        margin-top: .226667rem /* 17/75 */;
		        justify-content: space-between;
		        align-items: center;
		        background: #fff;
		        .shop-item-price{
			        color: #ff4444;
			        font-size: .4rem /* 30/75 */;
			        background: #fff;
	        	}
	        	.type{
		          	width: .933333rem /* 70/75 */;
		          	height: .426667rem /* 32/75 */;
		          	background-color: #feefec;
		          	text-align: center;
		          	line-height: .426667rem /* 32/75 */;
		          	font-size: .306667rem /* 23/75 */;
		            color: #ff4444;
	        	}
	     	}
	      	.address{
	          	padding-top: 4rem/75;
	          	color: #999999;
	          	font-size: .266667rem /* 20/75 */;
	      	}
	    }
	}
	.recommend-wrap{
        padding-bottom: 25rem/75;
        background:#f3f5f9;
        .recommendation{
            background:#fff;
        }
        .weui-grids{
            background:#fff;
            margin-bottom: 0;
        }
    }
    .recommendation {
    	padding-top: 25rem/75;
        padding-bottom: 25rem/75;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .recommendation-girds {
        padding-top: 0px!important;
        font-size: 13px;
        margin-bottom: 45px;
    }
    .recommendation-left {
        margin-left: 31px;
        position: relative;
        font-size: 15px;
        color: #333333;
    }
    .recommendation-right {
        margin-right: 43px;
        position: relative;
        font-size: 12px;
        color: #999999;
    }

    .recommendation-left::before {
        position: absolute;
        content: ' ';
        width: 15px;
        height: 15px;
        background-image: url('../assets/images/rings.png');
        background-position: center;
        background-size: 12px 9px;
        background-repeat: no-repeat;
        left: -20px;
        top: 4px;
    }

    .recommendation-right::after {
        position: absolute;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../assets/images/reload.jpg');
        background-position: center;
        background-size: 12px 9px;
        background-repeat: no-repeat;
        right: -20px;
        top: -1px;
    }
}
</style>
<style lang="less">
	.high-school .weui-grids {
        padding-bottom: 0.3333rem;
    }
	.high-school .weui-grid{
        padding-top: 0 !important;
    }
    .high-school .weui-grid__label {
        font-size: 12px;
        margin-top: 8px!important;
    }

    .recommendation-girds .weui-grid__icon {
        // width: 52px;
        // height: 45px;
        width: 43px;
        height: 43px;
    }

    .high-school .weui-grid__icon {
        width: 43px;
        height: 43px;
    }

    .high-school .weui-grid {
        padding-top: 16px;
        padding-bottom: 0px;
        border: none;
        margin: 0.10666667rem 0;
    }
    
    .high-school .weui-grid:before{
        border: none;
    }
    .high-school .weui-grid:after{
        border: none;
    }
    .high-school .weui-grids:before{
        border: none;
    }

</style>


